<template>
<validator name="pwdForm">
  <form role="form" name="Form" class="col-md-4 col-md-offset-4 col-sm-12" autocomplete="off" novalidate>
      <div class="form-group">
        <label for="usr">用户名:<span class="primary">{{account.username}}</span></label>
      </div>
      <div class="form-group">
        <input type="password" class="form-control" v-model="account.password" initial="off" placeholder="请输入密码" detect-change="off" v-validate:password="{'required':true,'minlength':8}">
        <div>
          <error-template v-show="$pwdForm.password.required">{{$pwdForm.password.required}}</error-template>
          <error-template v-show="!$pwdForm.password.required&&$pwdForm.password.minlength">{{$pwdForm.password.minlength}}</error-template>
        </div>
      </div>
      <div class="form-group">
        <input type="password" class="form-control" v-model="account.repassword" initial="off" detect-change="off"  placeholder="请确认密码" v-validate:repassword="{'repeat':account.password}">
        <div>
          <error-template v-show="$pwdForm.repassword.repeat">{{$pwdForm.repassword.repeat}}</error-template>
        </div>
      </div>
      <div class="form-group">
          <button type="button" v-on:click.prevent="compeleteRegister" class="form-control btn btn-success register">完成注册</button>
      </div>
  </form>
</validator>
<div class="clearfix"></div> 
</template>
<script>
import * as userService from 'src/api/user'
export default {
  props: {
    account: {
      type: Object,
      required: true
    },
    state: {
      type: Object,
      required: true
    }
  },
  methods: {
    compeleteRegister () {
      let self = this
      this.$validate(true, () => {
        if (self.$pwdForm.invalid) {
          return
        }
        var account = self.account
        userService.userRegister(account)
        .then(() => {
          self.state.step++
        }).catch((data) => {
          self.$notify({
            type: 'error',
            message: data
          })
        })
      })
    }
  }
}
</script>